<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <div class="panel-lead"><em>批量配置工序物料</em></div>
    </div>
    <div class="panel-body">
        <form id="batch-config-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('产品型号')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <select id="c-model_id" class="form-control selectpicker" name="model_id" data-live-search="true" required>
                        <option value="">请选择产品型号</option>
                        {volist name="models" id="model"}
                        <option value="{$model.id}">{$model.product.name} - {$model.name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('工序物料配置')}:</label>
                <div class="col-xs-12 col-sm-10">
                    <div class="alert alert-info">
                        <i class="fa fa-info-circle"></i> 请为该型号的各个工序配置所需物料
                    </div>
                    <table class="table table-bordered" id="process-material-table">
                        <thead>
                            <tr>
                                <th width="20%">工序</th>
                                <th width="25%">物料</th>
                                <th width="15%">用量</th>
                                <th width="15%">损耗率(%)</th>
                                <th width="10%">必需</th>
                                <th width="15%">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="process-material-row">
                                <td>
                                    <select name="process_materials[0][process_id]" class="form-control process-select" required>
                                        <option value="">请选择工序</option>
                                        {volist name="processes" id="process"}
                                        <option value="{$process.id}">{$process.name}</option>
                                        {/volist}
                                    </select>
                                </td>
                                <td>
                                    <select name="process_materials[0][material_id]" class="form-control material-select" required>
                                        <option value="">请选择物料</option>
                                        {volist name="materials" id="material"}
                                        <option value="{$material.id}">{$material.name} ({$material.code})</option>
                                        {/volist}
                                    </select>
                                </td>
                                <td>
                                    <input type="number" name="process_materials[0][quantity]" class="form-control" step="0.01" min="0" value="1" required>
                                </td>
                                <td>
                                    <input type="number" name="process_materials[0][loss_rate]" class="form-control" step="0.1" min="0" max="100" value="0">
                                </td>
                                <td>
                                    <input type="checkbox" name="process_materials[0][is_required]" value="1" checked>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger btn-xs remove-row">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-success" id="add-process-material-row">
                        <i class="fa fa-plus"></i> 添加工序物料
                    </button>
                </div>
            </div>
            
            <div class="form-group layer-footer">
                <label class="control-label col-xs-12 col-sm-2"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-success btn-embossed">{:__('保存配置')}</button>
                    <button type="button" class="btn btn-default btn-embossed" onclick="Layer.closeAll();">{:__('取消')}</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
$(function() {
    var rowIndex = 1;
    
    // 添加工序物料行
    $('#add-process-material-row').click(function() {
        var newRow = $('.process-material-row:first').clone();
        newRow.find('select, input').each(function() {
            var name = $(this).attr('name');
            if (name) {
                name = name.replace(/\[\d+\]/, '[' + rowIndex + ']');
                $(this).attr('name', name);
            }
        });
        newRow.find('select, input').val('');
        newRow.find('input[type="checkbox"]').prop('checked', true);
        newRow.find('input[type="number"][name*="quantity"]').val('1');
        newRow.find('input[type="number"][name*="loss_rate"]').val('0');
        
        $('#process-material-table tbody').append(newRow);
        rowIndex++;
    });
    
    // 删除工序物料行
    $(document).on('click', '.remove-row', function() {
        if ($('.process-material-row').length > 1) {
            $(this).closest('.process-material-row').remove();
        } else {
            Toastr.warning('至少需要保留一行配置');
        }
    });
    
    // 表单提交
    $('#batch-config-form').on('submit', function(e) {
        e.preventDefault();
        
        var modelId = $('#c-model_id').val();
        if (!modelId) {
            Toastr.error('请选择产品型号');
            return false;
        }
        
        var hasValidRow = false;
        $('.process-material-row').each(function() {
            var processId = $(this).find('.process-select').val();
            var materialId = $(this).find('.material-select').val();
            var quantity = $(this).find('input[name*="quantity"]').val();
            
            if (processId && materialId && quantity && parseFloat(quantity) > 0) {
                hasValidRow = true;
            }
        });
        
        if (!hasValidRow) {
            Toastr.error('请至少添加一个有效的工序物料配置');
            return false;
        }
        
        // 提交表单
        Fast.api.ajax({
            url: 'scanwork/process_material/batchConfig',
            data: $(this).serialize()
        }, function(data, ret) {
            Toastr.success(ret.msg);
            Layer.closeAll();
        });
    });
});
</script>
